import React from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  ListView,
} from 'react-native';

import BasePage from '../common/BasePage';
import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import TImage from '../../components/TImage';
import TButton from '../../components/TButton';
import SportDibiaoRequestSelfData from '../../actions/sport/SportDibiaoRequestSelfData';

export default class SportDibiaoMainPage extends BasePage {
  constructor(props) {
    super(props);

    this._scaleWidth = SizeUtils.getWidthScale();
    this._ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

    // this._dataList = [{title:"地标1", icon:require('../../../resource/images/sport/dibiao/1.png'),
    //                           desc:"第1个地标", isOpen:true},
    //                       {title:"地标2", icon:require('../../../resource/images/sport/dibiao/2.png'),
    //                                                 desc:"第2个地标地标地标地标地标地标地标地标地标地标"},
    //                       {title:"地标3地标3地标3地标3", icon:require('../../../resource/images/sport/dibiao/3.png'),
    //                                                 desc:"第3个地标地标地标地标地标地标地标地标地标地标标地标地标地标地标地标第3个地标地标地标地标地标地标地标地标地标地标标地标地标地标地标地标第3个地标地标地标地标地标地标地标地标地标地标标地标地标地标地标地标第3个地标地标地标地标地标地标地标地标地标地标标地标地标地标地标地标"},
    //                       {title:"地标4", icon:require('../../../resource/images/sport/dibiao/4.png'),
    //                                                 desc:"第4个地标地标地标地标地标地标地标地标地标地标"},
    //                     ];

    this._defaultIcon = {icon:require('../../../resource/images/sport/dibiao/5.png'), width:138, height:138};
    this._backgroudColor = "#ffffff00";

    this.state.dataList = [];
  }

  componentDidMount() {
    this._requestData();
  }

  _getDataSource() {
    return this._ds.cloneWithRows(this.state.dataList);
  }

  _dealEnterPage() {
    super._dealEnterPage();
    this._requestData();
  }

  _requestData() {
    new SportDibiaoRequestSelfData().call(this)
  }

  render() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
          height:SizeUtils.getWindowSize().height,
          backgroundColor:"#ffffff"}}>
          {this._renderTop()}
          {this._renderBottom()}
          {this._renderNavigationBar()}
      </View>
    )
  }

  _renderTop() {
    return (
      <View style={{flexDirection:"column",
            alignItems:"center"}}>
        <TImage source={require("../../../resource/images/sport/dibiao/top.png")}
          style={{width:750 * this._scaleWidth, height:404 * this._scaleWidth}}/>
        <View style={{top:SizeUtils.translateDesignHeightToCode(110), position:"absolute",
            backgroundColor:"#00000000", flexDirection:"column", alignItems:"center"}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(58), fontWeight:"bold",
              color:"#ffffff", textAlign:"center"}}>
            欢迎来到油田地标
          </Text>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), fontWeight:"bold", color:"#ffffff",
              textAlign:"center", paddingTop:SizeUtils.translateDesignHeightToCode(25)}}>
            挑战自己，点亮大庆地标，参加更多锻炼
          </Text>
          <TButton label="了解详情" style={{width:SizeUtils.translateDesignWidthToCode(214),
              height:SizeUtils.translateDesignHeightToCode(56), marginTop:SizeUtils.translateDesignHeightToCode(86)}}
              onPress={this._onPressKnow.bind(this)}
            color="#4890ce" />
        </View>
      </View>
    )
  }

  _renderBottom() {
    return (
      <View style={{flexDirection:"column", flex:1, paddingBottom:SizeUtils.translateDesignHeightToCode(20)}}>
        <View style={{width:SizeUtils.getWindowSize().width, height:SizeUtils.translateDesignHeightToCode(60),
            backgroundColor:"#f1f3f8", flexDirection:"row", alignItems:"center", justifyContent:"center"}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#4890ce", textAlign:"center"}}>
            我的里程碑(已点亮1个地标)
          </Text>
        </View>
        <ScrollView showsVerticalScrollIndicator={false}
            style={{flex:1, paddingTop:SizeUtils.translateDesignHeightToCode(20)}}>
          <View style={{
              flexDirection:"row", flexWrap:'wrap', alignItems:'center', justifyContent:"space-between",
              paddingLeft:SizeUtils.translateDesignWidthToCode(58),
              paddingRight:SizeUtils.translateDesignWidthToCode(58), }} >
              {
                this.state.dataList.map(
                  (data, index) => {
                    return this._renderItem(data, index);
                  }
                )
            }
          </View>
        </ScrollView>
      </View>
    )
  }

  _renderItem(data, index) {
    var icon = data.done === true ? {uri:data.image_url} : this._defaultIcon.icon;
    var width = data.done === true ? 174 : this._defaultIcon.width;
    var height = data.done === true ? 174 : this._defaultIcon.height;
    return (
      <TouchableOpacity key={index} style={{flexDirection:"column", width:SizeUtils.translateDesignWidthToCode(174), alignItems:"center",
            paddingTop:SizeUtils.translateDesignHeightToCode(20)}} onPress={() => this._onPressRow(data)}>
        <TImage source={icon} style={{width:width, height:height}}/>
        <Text style={{paddingTop:SizeUtils.translateDesignHeightToCode(15), textAlign:"center",
            fontSize:SizeUtils.translateFontSizeToCode(24), color:"#333333"}} numberOfLines={1}>
          {data.name}
        </Text>
        <Text style={{paddingTop:SizeUtils.translateDesignHeightToCode(10), textAlign:"center",
            fontSize:SizeUtils.translateFontSizeToCode(18), color:"#666666",
            height:SizeUtils.translateDesignHeightToCode(70), }} numberOfLines={3}>
          {data.done ? data.desc : data.task_desc}
        </Text>
      </TouchableOpacity>
    )
  }

  _onPressRow(data) {
    this.gotoPage(Config.pages.sport_dibiao_detail, {dibiaoData:data});
  }

  _onPressKnow() {
    this.gotoPage(Config.pages.sport_dibiao_welcome);
  }
}
